<html>
<body>
<head>
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/datePicker.css">
		<script type="text/javascript" src="scripts/jquery-1.2.6.js"></script>
		<script type="text/javascript" src="scripts/iutil.js"></script>
		<script type="text/javascript" src="scripts/idrag.js"></script>
        <script type="text/javascript" src="scripts/date.js"></script>  
        <script type="text/javascript" src="scripts/datePicker.js"></script>  
        <script type="text/javascript" src="scripts/calendar.js"></script>  
        <script type="text/javascript" src="scripts/gears_init.js"></script>        
        <script type="text/javascript" src="scripts/gg_gantt_db.js"></script>
<script>

function attachEvent(){
var progress;
		$('.bar').Draggable(
			{
				axis:	'horizontally',
				zIndex: 	1000,
				grid:[20,10],
				ghosting:	false,
				opacity: 	0.7,
				onDrag: function(x){
				ppid=$(this).parent().parent().attr("id");
					$('#'+ppid+' .wbs_date').text(x);
				}
			}
		);
	
		$('.daysTxt').blur(function(){
			pppid=$(this).parent().parent().parent().attr("id");
			$('#'+pppid+' .bar').css("width",$(this).val()*20);
		});
		$('.wbs_up').mousedown(function(){
			pppid=$(this).parent().parent().parent().attr("id");
     		progress=parseInt($('#'+pppid+' .bar').text());
			if(progress<100) progress=progress+1;
     		$('#'+pppid+' .bar_txt').text(progress);
		});
		$('.wbs_down').mousedown(function(){
			pppid=$(this).parent().parent().parent().attr("id");
     		progress=parseInt($('#'+pppid+' .bar').text());
			if(progress>0) progress=progress-1;
     		$('#'+pppid+' .bar_txt').text(progress);
		});
		$('.wbs_del').click(function(){
			pppid=$(this).parent().parent().attr("id");
     		gg_db_delrow(pppid);
			$(this).parent().parent().remove();
		});
}

function showRows(rid){
				arrec=rid.split("#");
				$('.wbs_row:last').clone().insertAfter('.wbs_row:last');
				attachEvent();
				$('.wbs_row:last').attr('id',arrec[0]);
				$('#'+arrec[0]+" .taskTxt").val(arrec[1]);
				$('#'+arrec[0]+" .daysTxt").val(arrec[2]);
				$('#'+arrec[0]+' .bar').css('width',arrec[2]*20);
				$('#'+arrec[0]+' .bar').css('position','relative');
				$('#'+arrec[0]+' .bar').css('left',arrec[3]);
				$('#'+arrec[0]+' .bar_txt').text(arrec[4]);
				$('#'+arrec[0]).show();
}
function removeRows(rid){
				$('.wbs_row:last').clone().insertAfter('.wbs_row:last');
				attachEvent();
				$('.wbs_row:last').attr('id',arrec[0]);
				$('#'+arrec[0]+' .bar_txt').text(arrec[4]);
}

function loadProject(uid){
	RA=gg_db_project(uid);
	for (i=0;i<RA.length;i++){
		//console.log(RA[i]);
	}
}
function loadRec(proj_id){
	i=0;
	$('.wbs_row[@id!=0]').remove();
	RA=gg_db_rows(proj_id);
	for (i=0;i<RA.length;i++){
		showRows(RA[i]);
	}
}
$(document).ready(
function()
{	
		var USERID=1;
		var PROJECTID=0;
		gg_init();
		
		loadProject(USERID);
		
		$('#project_id').change(function(){
		PROJECTID=$('#project_id').val();
		if($('#project_id').val()!=0){
		    loadRec(PROJECTID);
		}
		});
		
		
		attachEvent();
		$('#wbs_add').click(function(){
			recid=gg_db_addrow(PROJECTID);
			console.log(recid);
			showRows(recid);
		});
		
		$('#wbs_save').click(function(){
			$('.wbs_row').each(function(index) {
				id=$(this).attr("id");
				//console.log(id);
				if(id!=0){
					name=$('#'+id+" .taskTxt").val();
					days=$('#'+id+" .daysTxt").val();
					pos=parseInt($('#'+id+' .bar').css('left'));
					prg=$('#'+id+' .bar_txt').text();
					gg_db_updaterow(id,name,days,pos,prg,PROJECTID);
				}
			});
		});
});	
</script>        
</head>
<h1>Gantt Chart</h1>
<center>Project :
<select name="project" id="project_id"><option value="0">Select Project</option><option value="1">Moodle Offline</option><option value="2">Gantt Chart</option></select>
</center>
<img src="images/Add.gif" id="wbs_add">&nbsp;&nbsp;<img src="images/Save.gif" id="wbs_save">&nbsp;&nbsp;<img src="images/calendar.gif" id="calendar"><br><br>
<div id="container">
   	<div class="wbs_row" id="0" style="display:none">
			<div class="wbs_task">
    			<span class="wbs_task_name"><input size="25" maxlength="25" align="right" class="taskTxt" type="text">&nbsp;:</span>
        		<span class="wbs_days"><input size="2" maxlength="2" align="right" class="daysTxt"  type="text">&nbsp;</span> 
                <span class="wbs_date">000&nbsp;</span> 
           		<span class="wbs_del">&nbsp;&nbsp;X&nbsp;&nbsp;</span> 
           	</div>
    		<div  class="wbs_timeline">
        <div class="bar"><span class="bar_txt">123</span></div></div>
	</div>
    
<div>
</body>
</html>